<template>
  <div class="wrapper">

    <div class="login">
      <div class="header">
      <text style="color: #48c9bf;font-size:50px">登录聊天</text>
     </div>
      <div class="input-wrapper">
        <input onchange="onchangeUserNumber" class="input" type="text" placeholder="手机号" autofocus="true" value=""/>
      </div>
      <div class="input-wrapper">
        <input onchange="onchangeUserPassword" class="input" type="password" placeholder="密码" value=""/>
      </div>
      <div class="input-wrapper">
        <div class="input-login" @click="login">
          <text class="input-login-text" @click="login(event)">登录</text>
        </div>
      </div>
      <div class="input-wrapper">
        <text class="input-forget" @click="findPassword(event)">找回密码</text>
        <text class="input-register" @click="register (event)">立即注册</text>
      </div>
    </div>
    <toast id="toast"></toast>
  </div>
</template>

<script>
    var navigator = weex.requireModule('navigator')
    var modal = weex.requireModule('modal')
    module.exports = {
        data:{
            userNumber:'',
            userPassword:''
        },
        methods:{
            onchangeUserNumber:function (event) {
                this.userNumber = event.value;
            },
            onchangeUserPassword:function (event) {
                this.userPassword = event.value;
            },
            qqq(){
                var bundleUrl = this.$getConfig().bundleUrl;
                bundleUrl = new String(bundleUrl);
                var nativeBase;
                var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

                var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
                if (isAndroidAssets) {
                    nativeBase = 'file://assets/dist/';
                }
                else if (isiOSAssets) {
                    nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                }
                else {
                    var host = 'localhost:8081';
                    var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
                    if (matches && matches.length >= 2) {
                        host = matches[1];
                    }
                    nativeBase = 'http://' + host + '/dist/';
                }
                this.baseURL = nativeBase;
            },
            /*注册*/
            register (){
                this.qqq();
                navigator.push({
                    url: this.baseURL+'register.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            /*找回密码*/
            findPassword(event){
                this.qqq();
                navigator.push({
                    url: this.baseURL+'forgetpwd.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            /*处理登录*/
            login() {
                this.qqq();
                navigator.push({
                    url: this.baseURL+'tongxunlu.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
        }
    }}
</script>

<style>
  .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .header{
    width:550px;
    height: 150px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    color: crimson;
    font-size: 100px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    margin-top: 100px;
      margin-left: 100px;
      margin-top: -40px;

  }
  .login{
    margin-top: 180px;
  }
  .input-wrapper{
    width: 550px;
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom:60px;
  }
  .input {
    font-size: 30px;
    height: 80px;
    width: 550px;
    padding-left: 90px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-width:1px;
    border-color: #48c9bf;
    border-radius:10px;
    outline: none;
  }
  .input-img{
    position: absolute;
    top:10px;
    left: 15px;
    width: 60px;
    height: 60px;
  }
  .input-login{
    height: 80px;
    width: 550px;
    background-color: #48c9bf;
    border-radius: 10px;
    margin-top: 40px;
  }
  .input-login-text{
    height: 80px;
    width: 550px;
    text-align: center;
    line-height: 80px;
    color: white;
    font-size: 35px;
  }
  .input-forget{
    position: absolute;
    left: 30px;
    font-size: 30px;
  }
  .input-register{
    position: absolute;
    right: 30px;
    font-size: 30px;
  }
</style>